<template>
  <div class="login-container">
    <img class="login-div-wenzi" src="../../assets/images/login/wenzi.png" alt="">
    <!-- 登录模块 -->
    <div v-if="loginTF&&!missTF" class="login-div">

      <h1 class="login-div-h1">用户登录</h1>
      <div class="login-div-div">
        <img class="login-div-img" src="../../assets/images/login/yonghu.png" alt="">
        <input v-model="idValue" class="login-div-input" type="text" placeholder="请输入账号" >
      </div>
      <div class="login-div-div login-div-div1">
        <img class="login-div-img" src="../../assets/images/login/mima.png" alt="">
        <input v-model="passValue" class="login-div-input" type="password" placeholder="请输入密码" @blur.prevent="tips()" >
      </div>
      <div  class="login-div-div2">
        <img v-if="tipTF" class="login-div-img1" src="../../assets/images/login/kong.png" alt="">
        <span @click="missTF=true">忘记密码</span>
      </div>
      <div class="login-div-div3" @click="handleLogin">
        <img src="../../assets/images/login/denglu.png" alt="" class="login-div-img2">
      </div>
      <!-- <div class="login-div-div4" >
        <img src="../../assets/images/login/zhuce.png" alt="" class="login-div-img3" @click="goZhuce">
      </div> -->
    </div>
    <!-- 忘记密码 -->
    <div v-if="missTF" class="missPass login-div">
        <h1 class="missPass-h1">忘记密码</h1>
      <div class="missPass-div">
        <input v-model="phoneValue"  class="missPass-div-input" type="text" placeholder="请输入手机号" >
      </div>
      <div class="missPass-div1 missPass-div">
        <input v-model="yzmValue" class="missPass-div-input missPass-div-input1" type="text" placeholder="请输入验证码">
        <div :class="yzmTF?'missPass-div1-div1':'missPass-div1-div'" @click="getYzm">{{yzmText}}</div>
      </div>
      <div class="missPass-div missPass-div2">
        <input v-model="passwordValue"  class="missPass-div-input" type="password" placeholder="请输入新密码" >
      </div>
      <div class="misPass-div3" @click="submitPass">
        <div class="missPass-div3-div">提交</div>
      </div>

    </div>
    <!-- 注册模块 -->
    <div v-if="!loginTF&&!zcTF&&!missTF" class="login-div login-div1">
      <div class="login-div1-div">
        <img src="../../assets/images/login/qiyezhuce.png" alt="" class="login-div1-img">
      </div>
      <div class="login-div1-div1">
        <p class="login-div1-p">企业名称</p>
        <input v-model="mingchengValue" class="login-div1-input" placeholder="请输入企业名称" type="text">
      </div>
      <div class="login-div1-div1">
        <p class="login-div1-p">统一社会信用代码</p>
        <input v-model="idValue" class="login-div1-input" placeholder="请输入统一社会信用代码" type="text">
      </div>
      <div class="login-div1-div1">
        <p class="login-div1-p">企业联系人</p>
        <input v-model="lianxiValue" class="login-div1-input" placeholder="请输入企业联系人" type="text">
      </div>
      <div class="login-div1-div1">
        <p class="login-div1-p">企业联系人电话</p>
        <input v-model="dianhuaValue" class="login-div1-input" placeholder="请输入联系人电话" type="text">
      </div>
      <div class="login-div1-div1">
        <p class="login-div1-p">登录密码</p>
        <input v-model="passValue" class="login-div1-input" placeholder="请输入登录密码" type="password">
      </div>
      <div class="login-div1-div2" @click="postZC">
        <img src="../../assets/images/login/liji.png" alt="" class="login-div1-img1">
      </div>
      <div class="login-div1-div3" >
        <img @click="mianzeTF=!mianzeTF" v-show="mianzeTF" src="../../assets/images/login/click.png" alt="" class="login-div1-img3">
        <img @click="mianzeTF=!mianzeTF" v-show="!mianzeTF" src="../../assets/images/login/noClick.png" alt="" class="login-div1-img3">
        <img @click="mzsmTF=false" src="../../assets/images/login/mianze.png" alt="" class="login-div1-img2">
      </div>
    </div>
    <div class="mianzePopup" v-if="!mzsmTF">
        <div class="mianzePopup1">
          <div class="mianzePopup1-icon">
            <i class="el-icon-close" @click="mzsmTF=true"></i>
          </div>
          <div>
            <h2 class="mainzePopup1-h2">贵州明德工程咨询有限公司</h2>
            <h2 class="mainzePopup1-h2">职业培训免责声明</h2>


            <p class="mianzePopup1-p">尊敬的用户：<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎使用贵州明德工程咨询有限公司培训中心网络服务（以下简称本中心），但在使用本网络服务之前，请您务必仔细阅读并透彻理解本声明。如果您选择我公司及本中心提供的任何服务，那么您的行为将被视为对本声明全部内容的完全认可。<br/>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一、网络服务条款<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.1本网站的所有权和各项服务的运作权均归属贵州明德工程咨询有限公司培训中心所有。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.2本中心提供的服务完全按照发布章程、服务条款和操作规则执行。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.3本中心有权在必要时修改服务条款，相关服务条款一旦发生变动，会在重要页面上提示。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.4本中心对明德职业卫生培训小程序上的视频学习内容和考试有最终解释权。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.5用户如不同意所改动的相关服务条款之内容，可以主动申请取消获得的网络服务。如果用户继续享用网络服务，则视为接受相关服务条款的变动。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.6本中心就各项服务的安全无误及不中断不负担任何明示或默示的保证责任，用户使用本网站必须承担使用本服务的可能风险及因该风险可能造成的损害。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二、用户注册与管理<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.1 用户注册成功后，应自行承担注册帐号及密码的保管责任。用户应注意网络安全防护，定期更改密码，设置密码安全保护，防止帐号密码泄露，保证个人信息安全。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.2 用户使用本中心的服务，必须遵循：<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A.遵守中华人民共和国有关的法律和法规；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B.不得为任何非法目的而使用网络服务系统；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C.遵守所有与网络服务有关的网络协议、规定和程序；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D.不得利用权网络服务系统进行任何可能对互联网的正常运转造成不利影响的行为；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E.不得利用本中心服务系统传输任何骚扰性的、中伤他人的、辱骂性的、恐吓性的、庸俗淫秽的或其他任何非法的信息资料；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;F.不得利用本中心网络服务系统进行任何不利于贵州明德工程咨询有限公司培训中心的行为。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.3 用户对以其用户名进行的所有行为承担全部责任。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.4 贵州明德工程咨询有限公司培训中心有判定用户行为是否符合本中心服务条款要求的权利，如果用户违背了服务条款的规定，本中心有权中断对其提供相关网络服务。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.5 本中心通过注册协议等形式所获得的使用者姓名、性别、身份证等个人资料，在未经注册用户本人同意的情况下，不会以任何方式公开给其它任何一方。当司法机关依法要求本网站披露个人资料时，本网站将根据执法机关的要求或为公共安全之目的而提供个人资料。在此情况下的公开披露，本网站不承担任何责任。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.6本中心上必须注册缴费成功后，方可在明德职业卫生培训小程序上进行课程学习及考试。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三、版权声明<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本网络提供上传的各类视频课程信息，其版权均归贵州明德工程咨询有限公司所有，禁止任何人、任何单位进行复制、引用、链接，如有任何侵权行为，请您及时改正，必要时，本中心有权利向人民法院提起诉讼。部分非我公司的资源，本中心均会注明出处、版权归属，如您对版权的归属存在异议，请您致信，我们会立即做出答复并及时解决，如果您认为本中心有侵犯您权益的行为，请通知我们，我们一定会根据实际情况及时进行处理。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;四、责任声明<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.1 凡在本中心服务网络出现的信息，包括但不限于培训课程、公告、评论、图片及其他信息，均仅供参考，页面浏览者在使用前请进一步核实，并对任何自主决定的行为负责。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.2 本中心服务网络所上传的公开课程等各类培训信息，并不构成对任何实质性的商业培训邀约，访问者据此进行的相关行为所造成的盈余或亏损概与本中心无关。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.3 我们对任何直接、间接、偶然、特殊及继起的损害不承担责任，这些损害的来源包括但不限于：不正当使用网络服务、非法使用网络服务或用户传送的信息有所变动。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.4 为了网站的正常运行，本中心需定期或不定期地对网站进行维护，因此类情况而造成的正常服务中断，请用户予以理解。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.5 因以下因素而造成的网络服务中断、延误、遗漏等错误，本中心不承担任何责任：<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A.因互联网接入单位、网络支持单位、相关电信部门的线路故障、设备故障造成的信息传递异常；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B.因黑客攻击、网络病毒、政府管制、法律法规的变更等出现的网络服务异常；<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C.因火灾、地震、台风、战争、罢工、瘟疫、流行性和爆发性传染病、其他重大性疫情造成的不可预见并对后果无法避免等不可抗力造成的网络服务异常。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.6 用户必须通过本中心提供的二维码进入明德职业卫生培训小程序，方能获得相应培训视频课程和考试内容，其它方式进入的小程序所获得的相关信息，使用者请自行辨别及判断，本中心不承担任何责任。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.7我中心对用户通过本中心网络与其他网络的链接获得的一切资料的真实性、准确性、完整性不承担任何责任，使用者应自行辨别及判断，本中心对用户利用其他网络获得的资料后造成的损失不承担赔偿责任。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;五、法律的适用和管辖<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.1 本服务协议条款的生效、履行、解释及争议的解决均适用中华人民共和国法律，如产生争议，提交给贵阳市仲裁委员会进行仲裁。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.2 本服务协议条款因与中华人民共和国现行法律相抵触而导致部分无效，不影响其他部分的效力。</p>
          </div>

        </div>
    </div>
    <!-- 注册成功模块 -->
    <div v-if="zcTF&&!missTF" class="login-div login-div2">
      <div class="login-div2-div">
        <img src="../../assets/images/login/qiyezhuce.png" alt="" class="login-div2-img">
      </div>
      <div class="login-div2-div1">
        <img src="../../assets/images/login/chenggong.png" alt="" class="login-div2-img1">
      </div>
      <div class="login-div2-div2" @click="handleLogin">
        <img src="../../assets/images/login/tiyan.png" alt="" class="login-div2-img2">
      </div>
    </div>
  </div>
</template>

<script>
import { companyRegister } from '@/api/companyOperate'
import { getYzmFunc,postPassword } from '@/api/login.js'
export default {
  name: 'Login',
  data() {
    return {
      mzsmTF:true,
      // 是否显示‘密码不能为空’的提示 true 显示提示内容
      tipTF: false,
      // 是否显示注册成功模块: true 显示注册成功模块  false显示注册模块
      zcTF: false,
      // 是否显示登录模块： true 显示登录模块 false 显示注册模块
      loginTF: true,
      yzmTF:false,
      missTF:false,
      passValue: '',
      passwordValue:'',
      yzmValue:'',
      phoneValue:'',
      mianzeTF:true,
      yzmText:'获取验证码',
      idValue: '',
      mingchengValue: '',
      xinyongValue: '',
      lianxiValue: '',
      dianhuaValue: '',
      dengluValue: '',
      yzmNum:60,
      yzmCount:'',

    }
  },
  destroyed(){
    clearInterval(this.yzmCount)
  },
  methods: {
    submitPass(){
      if(this.yzmValue != ''&&this.phoneValue != '' &&this.passwordValue != ''){
        const that = this
        postPassword(this.passwordValue,this.phoneValue,this.yzmValue)
          .then(response => {
            that.missTF = false;
            that.loginTF = true;
            that.zcTF = false;
            this.$message({
              type: 'success',
              message: response.data.message
            });
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      }else{
        this.$message({
          type: 'info',
          message:'手机号、验证码、密码不能为空'
        });
      }

    },
    getYzm(){
      if(this.phoneValue == ''||!(/^1[3456789]\d{9}$/.test(this.phoneValue))){
        this.$message({
          type: 'info',
          message: '请输入正确手机号'
        });
      }else{
        const that = this
        getYzmFunc(this.phoneValue,3)
          .then(response => {
            // console.log(response)
            that.zcTF = true
            that.countDwon();
            this.$message({
              type: 'success',
              message: response.data.message
            });
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      }

    },
    countDwon(){
       this.yzmTF=true;
       this.yzmText= this.yzmNum+'s'
      this.yzmCount = setInterval(()=>{
        if(this.yzmNum!=0){
          this.yzmNum = this.yzmNum - 1;
          this.yzmText= this.yzmNum+'s';
        }else{
          this.yzmText = '获取验证码'
           this.yzmTF=false;
          clearInterval(this.yzmCount)
        }
      },1000)
    },
    // 判断是否显示提示内容
    tips() {
      if (this.passValue === '') {
        this.tipTF = true
      } else {
        this.tipTF = false
      }
    },
    // 是否显示注册模块
    goZhuce() {
      this.loginTF = false
    },
    // 注册
    postZC() {

      if(this.mianzeTF){
        const that = this
        const data = {
          companyName: this.mingchengValue, // 企业名称
          companyCode: this.idValue, // 统一信用代码
          userName: this.lianxiValue, // 企业联系人
          userPhone: this.dianhuaValue, // 企业联系人电话
          logoPasswd: this.passValue // 登录密码
        }
        companyRegister(data)
          .then(response => {
            // console.log(response)
            that.zcTF = true
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      }else{
              this.$confirm('是否同意《明德培训免责声明》', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.mianzeTF = true;
                  this.postZC();
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                  });
                });
      }

    },
    // 立即体验
    experience() {
      this.zcTF = false
      this.loginTF = true
    },
    // 登录
    handleLogin() {
      // const that = this
      const data = {
        username: this.idValue,
        password: this.passValue,
        loginType: 2	// 培训端为1 ，企业端为2
      }
      this.$store.dispatch('LoginByUsername', data).then(() => {
        this.loading = false
        this.$router.push({ path: '/' })// this.redirect ||  这个表示重定向到退出前的页面
        // this.$router.push({ path: '/companyOperateManage/companyHome' })// this.redirect ||  这个表示重定向到退出前的页面
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.message
        })
        this.loading = false
      })
    },
    //立即体验
    experienceFun() {
      const experienceParam={
          username: this.idValue,
          password: this.passValue,
          loginType: 2	// 培训端为1 ，企业端为2
        }
      this.$store.dispatch('LoginByUsername', experienceParam).then(() => {
        this.loading = false
        this.$router.push({ path: '/' })// this.redirect ||  这个表示重定向到退出前的页面
        // this.$router.push({ path: '/companyOperateManage/companyHome' })// this.redirect ||  这个表示重定向到退出前的页面
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.message
        })
        this.loading = false
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
*{
  padding:0;
  margin:0;
}
.mainzePopup1-h2{
  text-align: center;
  margin-bottom: 10px;
}
.mianzePopup{
  position: fixed;
  top:0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

.mianzePopup1{
  position: fixed;
  width: 600px;
  height: 600px;
  background-color: #fff;
  border-radius: 5px;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 20px;
}
.mianzePopup1-p{
  font-size: 18px;
  height: 450px;
  overflow-y: scroll;
  line-height: 30px;
}
.mianzePopup1 .mianzePopup1-icon{
  width: 100%;
  text-align: right;
}
.mianzePopup1 i {
  font-size: 20px;
}
.login-div1-img2{
  width:40%;
}
.login-div1-img3{
  width: 2.5%;
  margin-right: 10px;
}
.login-div1-div3{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.missPass-h1{
  font-size: 28px;
  color: #2e83ff;
  width: 100%;
  text-align: center;
  margin-top: 50px;
}
.missPass-div{
  padding:0 60px;
  margin-top: 47px;
}
.missPass-div-input{
  width:100%;
  height: 60px;
  border-radius: 3px;
  border:1px solid #ededed;
  text-indent: 25px;
}
.missPass-div1{
  margin-top: 26px;
  display: flex;
}
.missPass-div2{
  margin-top: 26px;
}
.missPass-div-input1{
  flex-shrink: 0;
  width: 70%;
}
.missPass-div1-div{
  width:30%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #2e83ff;
  font-size: 16px;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
}
.missPass-div1-div1{
  width:30%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #999999;
  font-size: 16px;
  border-radius: 3px;
  color: #ffffff;
}
.misPass-div3{
  padding:0 60px;
  margin-top:26px;

}
.missPass-div3-div{
  width: 100%;
  height: 60px;
  border-radius: 3px;
  font-size: 19px;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1977ff;
}
.login-container{
  background-image: url(../../assets/images/login/bg.jpg);
  background-size: 100% 100%;
  width:100%;
  height:100%;
  background-repeat: no-repeat;
  position: relative;
}
.login-div-wenzi{
  width:700px;
  position: absolute;
  top:10%;
  left: 0;
  right: 0;
  margin: auto;
}
.login-div{
  width:499px;
  height:481px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow:0px 0px 20px 0px rgba(13,105,255,0.46);
  position: absolute;
  top:30%;
  left: 0;
  right: 0;
  margin: auto;
}
.login-div-h1{
  font-size:28px;
  font-family:Microsoft YaHei UI;
  font-weight:bold;
  color:rgba(46,131,255,1);
  text-align: center;
  margin-top:45px;
  margin-bottom: 50px;
}
.login-div-div{
  width:377px;
  height:60px;
  margin: 0 auto;
  position: relative;
}
.login-div-div .login-div-img{
  width:18px;
  height:18px;
  display: block;
  position: absolute;
  top:0;
  left: 27px;
  bottom: 0;
  margin: auto;
}
.login-div-div .login-div-input{
  display: block;
  width:377px;
  height:60px;
  border:2px solid rgba(237,237,237,1);
  border-radius:3px;
  text-indent: 64px;
}
.login-div-div1{
  margin-top:26px;
}
.login-div-div2{
  position: relative;
  width:377px;
  margin:0 auto;
  margin-top:10px;
}
.login-div-img1{
  position: absolute;
  width:127px;
  left: 0;

}
.login-div-div2 span{
  position: absolute;
  right: 0;
  font-size: 16px;
  color: #303030;
}
.login-div-div3{
  width:377px;
  margin:0 auto;
  margin-top: 51px;
}
.login-div-img2{
  width:100%;
}
.login-div-div4{
  width:377px;
  margin: 0 auto;
  margin-top: 13px;
}
.login-div-img3{
  width: 122px;
}
.login-div1{
  width:710px;
  height:561px;
}
.login-div1-div{
  width:287px;
  margin: 0 auto;
  margin-top: 45px;
  margin-bottom: 41px;
}
.login-div1-img{
  width: 100%;
}
.login-div1-div1{
  width: 555px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  margin:0 auto;
  margin-bottom: 18px;
}
.login-div1-div1:nth-last-child(1){
  margin-bottom: 0;
}
.login-div1-p{
  width: 155px;
  font-size:19px;
  font-family:Alibaba PuHuiTi;
  font-weight:400;
  color:rgba(51,51,51,1);
  text-align: right;
}
.login-div1-input{
  width:377px;
  height: 44px;
  border:2px solid rgba(237,237,237,1);
  border-radius:3px;
  text-indent: 18px;
}
.login-div1-div2{
  width:377px;
  margin:0 auto;
  margin-top: 43px;
}
.login-div1-img1{
  width: 100%;
}
.login-div2{
  width: 710px;
  height: 561px;
}
.login-div2-div{
  width:287px;
  margin:0 auto;
  margin-top: 97px;
}
.login-div2-div img{
  width: 100%;
}
.login-div2-div1{
  width:262px;
  margin:0 auto;
  margin-top: 102px;
}
.login-div2-div1 img{
  width: 100%;
}
.login-div2-div2{
  width:377px;
  margin:0 auto;
  margin-top: 108px;
}
.login-div2-div2 img{
  width: 100%;
}
</style>
